<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float练习2</title>
</head>
<style>
    *{
        padding: 0;
        margin:0;
    }

    .ofhidden{
        overflow: hidden;
        _zoom:1
    }

    .container{
        width: 970px;
        margin:0 auto;
    }

    .container .header{
        overflow: hidden;
        zoom: 1;
    }

    .container .logo{
        float: left;
        width: 277px;
        height: 103px;
        background-color: red;
    }
    .container .title{
        float: right;
        width: 137px;
        height: 49px;
        margin-bottom: 8px;
        background-color: green;
    }

    .container .nav{
        float: right;
        width: 679px;
        height: 46px;
        background-color: green;
    }

    .container .content{
        /*overflow: hidden;*/
        /*width: 970px;*/
        /*height: 435px;*/
        overflow: hidden;
        zoom: 1;
        margin-top: 10px;
    }

    .container .content .contentLeft{
        float: left;
        width: 310px;
        height: 435px;
        background-color: orange;
    }

    .container .content .contentRight{
        float: left;
        width: 650px;
        height: 435px;
        margin-left:10px;
    }

    .container .content .contentRight .contentRTop{
        overflow: hidden;
        zoom: 1;
    }

    .container .content .contentRight .contentRBottom{
        margin-top: 10px;
        width: 650px;
        height: 25px;
        background-color: green;
    }
    
    .content .contentRTop .newslist{
        float: left;
        width: 450px;
        height: 400px;
    }
    .content .contentRTop .hotpic{
        float: left;
        width: 190px;
        height: 400px;
        margin-left: 10px;
        background-color: orangered;
    }

    .content .contentRTop .newslist .new01{
        width: 450px;
        height: 240px;
        background-color: blue;
    }

    .content .contentRTop .newslist .new02{
        width: 450px;
        height: 110px;
        margin-top: 10px;
        background-color: blue;
    }

    .content .contentRTop .newslist .new03{
        width: 450px;
        height: 30px;
        margin-top: 10px;
        background-color: blue;
    }

    .footer{
        height: 35px;
        margin-top: 10px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <!--header start-->
        <div class="header">
            <div class="logo"></div>
            <div class="title"></div>
            <div class="nav"></div>
        </div>
        <!--header end-->

        <!--content start-->
        <div class="content">
            <!--content left start-->
            <div class="contentLeft"></div>
            <!--content left end-->
            <div class="contentRight">
                <div class="contentRTop">
                    <div class="newslist">
                        <div class="new01"></div>
                        <div class="new02"></div>
                        <div class="new03"></div>
                    </div>
                    <div class="hotpic"></div>
                </div>
                <div class="contentRBottom"></div>
            </div>
        </div>
        <!--start end-->
        <!--footer start-->
        <div class="footer">

        </div>
        <!--footer end-->
    </div>
</body>
</html>